<template>
  <view class="container">
    <view class="page-body">
      <view class='wrapper'>
        <view class='toolbar' @tap="format">

          <!-- <view class="iconfont icon-date" @tap="insertDate"></view>

          <view class="iconfont icon--checklist" data-name="list" data-value="check"></view>

          <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
            data-name="list" data-value="ordered"></view>

          <view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"
            data-value="bullet"></view>

          <view class="iconfont icon-undo" @tap="undo"></view>

          <view class="iconfont icon-redo" @tap="redo"></view>

          <view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>

          <view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>

          <view class="iconfont icon-shanchu" @tap="clear"></view> -->

        </view>
      
        <editor :id="editorId" showImgSize showImgToolbar showImgResize ref="editorRef" class="ql-container"
          :placeholder="placeholder" @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"
          @blur="getContents">
        </editor>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: 'approvalEditor',
  data () {
    return {
      readOnly: false,
      formats: {},
      timer: null,
      editorDetailNew: '',
    }
  },
  props: {
    editorDetail: {
      type: String,
      default: null
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    editorId: {
      type: String,
      default: null
    },
  },
  created(){
    uni.loadFontFace({
      family: 'Pacifico',
      source: 'url("https://sungd.github.io/Pacifico.ttf")'
    })
        console.log('this.placeholder',this.placeholder);
  },
  mounted () {

    
    this.onEditorReady()
    // 将数据渲染到富文本内
    this.timer = setTimeout(() => {
      if (this.editorDetail) {
        clearInterval(this.timer);
        console.log("editor====", this.editorDetail)
        this.editorCtx.setContents({
          html: this.editorDetail,
          success (res) {
          }
        })
      }
    }, 100)
  },
  watch: {
    editorDetail (newValue, oldValue) {
      //console.log("watch====",newValue)
      this.editorCtx.setContents({
        html: newValue,
        success (res) {
        }
      })
    }
  },
  methods: {
    handleEditorBlur () {
      // 用 $nextTick 确保组件已渲染
      this.$nextTick(() => {
        // 方案1：优先通过 ref 调用（H5/APP 较稳定）
        if (this.$refs.editorRef && typeof this.$refs.editorRef.blur === 'function') {
          this.$refs.editorRef.blur();
          console.log('通过 ref 调用 blur 成功');
          return;
        }

        // 方案2：若 ref 失败，用选择器获取组件上下文（兼容小程序）
        const query = uni.createSelectorQuery().in(this);
        query.select('.ql-container').context((res) => {
          if (res.context && typeof res.context.blur === 'function') {
            res.context.blur();
            console.log('通过选择器调用 blur 成功');
          } else {
            console.error('editor 组件不支持 blur 方法');
          }
        }).exec();
      });
    },
    // 失去焦点时，获取富文本的内容
    async getContents (e) {
      this.editorDetailNew = e.detail.html;

      let _this = this;
      await this.editorCtx.getContents({
        success (res) {
          if (res.text == '\n') {
            _this.$emit('getContents', { editorId: _this.editorId, content: '' });
          } else {
            _this.$emit('getContents', { editorId: _this.editorId, content: res.html });
          }

        }
      })
    },

    readOnlyChange () {
      this.readOnly = !this.readOnly
    },
    onEditorReady () {
      uni.createSelectorQuery().select('#' + this.editorId).context((res) => {
        this.editorCtx = res.context
      }).exec()
    },
    undo () {
      this.editorCtx.undo()
    },
    redo () {
      this.editorCtx.redo()
    },
    format (e) {
      let { name, value } = e.target.dataset
      if (!name) return
      this.editorCtx.format(name, value)
    },
    onStatusChange (e) {
      const formats = e.detail
      this.formats = formats
    },
    insertDivider () {
      this.editorCtx.insertDivider({
        success: function () {
          console.log('insert divider success')
        }
      })
    },
    clear () {
      this.editorCtx.clear({
        success: function (res) {
          console.log("clear success")
        }
      })
    },
    removeFormat () {
      this.editorCtx.removeFormat()
    },
    insertDate () {
      const date = new Date()
      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.editorCtx.insertText({
        text: formatDate
      })
    },
    insertImage () {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.editorCtx.insertImage({
            src: res.tempFilePaths[0],
            alt: '图像',
            success: function () {
              console.log('insert image success')
            }
          })
        }
      })
    }
  },
}
</script>

<style>
@import "./cs.css";

.iconfont {
  display: inline-block;
  padding: 8px 8px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 20px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ql-container {
  box-sizing: border-box;
  width: 100%;
  min-height: 10vh;
  height: auto;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.ql-active {
  color: #06c;
}
</style>
